<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%  
response.setHeader("Access-Control-Allow-Origin", "*");  
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>景点数据详情·数据工厂</title>
	<link href="${pageContext.request.contextPath }/img/webLogoIcon.png" rel="shortcut icon">
    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/font-awesome.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/style.css" rel="stylesheet">
    <!-- FooTable -->
    <link href="${pageContext.request.contextPath }/css/footable.core.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/css/mypage.css" rel="stylesheet">
    <style>
		.select2_demo_1{
			float: left;
			width: 120px;
			display: inline;
			margin-left: 10px;
		}
		.form-control{
			display: inline;
		}
		
		.col-sm-3{
			float:right;
			width: 560px;
		}
		.input-group{
			float:right;
			width: 240px;
			margin-left: 5px;
		}
	   td{
	        vertical-align:middle;
	    }
	    .source{
	    	display:inline-block;
	        cursor: pointer;
		   	margin-bottom: 10px;
		    padding: 5px 5px;
		    border: 1px solid #ccc;
		    border-radius: 4px;
		    margin-right: 20px;
   		}
   		.sourceAct{
   			border-color:#f8ac59;
   			color:#f8ac59;
   		}
   		.webAct{
   			border-color:#f8ac59 !important;
   			color:#f8ac59;
   		}
   		.web{
	    	display:inline-block;
	        cursor: pointer;
		   	margin-bottom: 10px;
		    padding: 5px 5px;
		    border: 1px solid #ccc;
		    border-radius: 4px;
		    margin-right: 20px;
   		}
	</style>
</head>
<body>
    <div id="wrapper">
        <nav class="navbar-default navbar-static-side" role="navigation">
            <%request.setAttribute("LEFT", "attractions");%>
            <%@include file="../components/left.jsp"%>
        </nav>
        <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
		<jsp:include page="../components/head.jsp" flush="true" />
        </div>
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>景点数据</h2>
                <ol class="breadcrumb">
                	<li class="nav-main1">
                		<a href="${pageContext.request.contextPath}/admin/tosystem_overview">主页</a>
                	</li>
                	<li class="nav-main2" >
                		<a id="navigation1" href="#" >旅游数据</a>
                	</li>
                	<li class="active">
                		<a>景点数据</a>
                	</li>
               	</ol>
            </div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">	
                            <div class="row m-t-sm">
                                <div class="col-lg-12">
                                <div class="panel blank-panel">
                                <div class="panel-body">
                                <div class="tab-content">
                                <div class="tab-pane active" id="tab-1">
                                       <div class="feed-activity-list" id="list" style="border-bottom: 2px solid #e7eaec;">
	          
                                    	</div>
                                    	
                                    	<h2>景点评论</h2>
                                    	
                                    	<div class="feed-activity-list" id="comment">
	          
                                    	</div>
                                    	<div class="feed-activity-list" id="logs">
                                    		<div class="box" id="box" style="float: right;"></div>
                                    	</div>
                                    
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        </div>
		<jsp:include page="../components/footer.jsp" flush="true" />
        </div>
        </div>
    <!-- Mainly scripts -->
    <script src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.metisMenu.js"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.slimscroll.min.js"></script>
    <!-- Custom and plugin javascript -->
    <script src="${pageContext.request.contextPath }/js/inspinia.js"></script>
    <script src="${pageContext.request.contextPath }/js/pace.min.js"></script>
    <!-- FooTable -->
    <script src="${pageContext.request.contextPath }/js/footable.all.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/mypage.js"></script>
    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function() {
            $('.footable').footable();
        });
        <% 
	        String article_public_id = (String)request.getParameter("article_public_id");
	      %>
	      var article_public_id = '<%=article_public_id%>'
        
        $(function(){
        	carlist();
        	comment();
		});
        
		function carlist(){
        	$.ajax({
        		url : "${pageContext.request.contextPath}/attractions/detail",
        		type : "post",
        		data:{
        			article_public_id: article_public_id,
        		},
        		success: function(res1) {
        			let res = JSON.parse(res1);
    				var imgs = JSON.parse(res.img_url);
    				var imgHtml = ''
    				for (var j = 0; j < imgs.length; j++) {
    					imgHtml += '<span><a target="_blank" href="'+imgs[j]+'"><img style="width:200px;margin:0 10px 10px 0;" src="'+imgs[j]+'"></a></span>'
					}
					var html = '<div class="feed-element" style="display: flex; justify-content: center;">'+
				                    '<div class="search-result" style="padding:10px 60px;">'+
				                    	'<div>'+
					                   		'<h2 style="text-align: center;"><a target="_blank" href="'+res.detailUrl+'">'+res.name+'</a></h2>'+
					                   		'<br />'+
					                   		'<p>'+
					                   			'<span>采集时间: '+res.spider_time+'</span>'+
					                   			'<span style="margin-left: 30px;">点评数:  '+res.evaluation_num+'</span>'+
					                   			'<span style="margin-left: 30px;">评分: '+res.score+'</span>'+
					                   			'<span style="margin-left: 30px;">最低价格: '+res.bottom_price+'</span>'+
					                   			'<span style="margin-left: 30px;">最高价格: '+res.peak_price+'</span>'+
					                   			'<span style="margin-left: 30px;">优惠: '+res.preferential+'</span>'+
					                   		'</p>'+
					                   		'<p>'+
					                   			'<span>出发城市:  '+res.origin+'</span>'+
					                   			'<span style="margin-left: 30px;">目的地: '+res.destination+'</span>'+
					                   		'</p>'+
					                   		'<p>简介： '+res.content+'</p>'+
					                   	'</div>'+
					                 	'<div>'+
					                 		imgHtml+
				                    	'</div>'+ 
					                   '</div>'+
					               ' </div>'
				     $('#list').html(html)
        		},
        		error: function(err) {
        			console.log(err)
        		}
        	});
        }
		
		
		function comment(pageNum){
        	$.ajax({
        		url : "${pageContext.request.contextPath}/attractionReview/travecommentlist",
        		type : "post",
        		data:{
        			pageNum: pageNum
        		},
        		success : function(res1) {
        			$('#comment').html('')
        			let res = JSON.parse(res1);
        			if (res.totalPage > 500) {
        				res.totalPage = 500;
					}
        			paging(res.totalData, res.totalPage, pageNum)
        			var list = res.list
        			for (var i = 0; i < list.length; i++) {
        				var content = list[i].content;
        				if (content.length - 300> 0) {
        					content = content.substring(0, 300) + '......';
						}
        				var scoreHtml = ''
        				if (list[i].details_grading_json) {
        					var details_grading_json = JSON.parse(list[i].details_grading_json);
        					for (var j = 0; j < details_grading_json.length; j++) {
        						scoreHtml += '<span style="margin-right: 25px;">'+details_grading_json[j].latitudeName+' '+details_grading_json[j].score+'（'+details_grading_json[j].chScore+'） </span>'
    						}
						}
        				var imgHtml = ''
        				if (list[i].img_url) {
        					var imgs = JSON.parse(list[i].img_url)
            				for (var j = 0; j < imgs.length; j++) {
            					imgHtml += '<span><a target="_blank" href="'+imgs[j]+'"><img style="width:100px;height:66px;margin:0 10px 10px 0;border-radius: 4px;" src="'+imgs[j]+'"></a></span>'
    						}
						}
						var html = '<div class="feed-element" style="margin-left: 165px;">'+
			                           '<div class="search-result" style="display: flex;">'+
				                           	'<div style="float:left;">'+
				                           		'<p><img style="width: 120px;border-radius: 4px;" src="'+list[i].profile+'"></p>'+
				                           	'</div>'+
				                           	'<div style="float: left;padding:0 0 0 20px;">'+
					                           	'<p>'+
					                   				scoreHtml+
				                   				'</p>'+
				                   				'</br>'+
						                   		'<p>'+
						                   			'<span style="margin-right: 25px;">点评时间： '+list[i].time+'</span>'+
						                   			'<span style="margin-right: 25px;">点评用户： '+list[i].nickname+'</span>'+
						                   			'<span style="margin-right: 25px;">评分：  '+list[i].score+'</span>'+
						                   		'</p>'+
					                   		'</div>'+
					                   	'</div>'+
					                   	'<div class="search-result">'+
						                   	'<p>'+
					                   			'<span>评价：'+content+' </span>'+
					                   		'</p>'+
						                   	'<p>'+
						                   		imgHtml+
					                   		'</p>'+
					                	'</div>'+
				                	'</div>'
					     $('#comment').append(html)
					}
        			if (list.length == 0) {
        				$('#comment').html('<div class="feed-element">暂无数据！</div>')
					}
        		},
        		error: function(res) {
        			$('#comment').html('<div class="feed-element">暂无数据！</div>')
        		}
        	});
        }
		
		
		function paging(totalData,totalPage, pagenum) {
			$('#box').paging({
				initPageNo : pagenum, // 初始页码
				totalPages : totalPage, //总页数
				totalCount : '合计' + totalData + '条数据', // 条目总数
				slideSpeed : 600, // 缓动速度 单位毫秒
				jump : true, //是否支持跳转
				callback : function(page) { // 回调函数 
					}
			});
		}
        
		function JumpToPage(pageNum) {
			comment(pageNum)
		}
		//跑马灯方法 
// 		 function init(){
// 			    //获取标题
// 			    var title=document.title;
// 			    //分割字符串--->字符数组
// 			    var arr=title.split("");
// 			    //删除第一个元素并返回该元素
// 			    var e=arr.shift();
// 			    //把一个对象添加到数组末尾
// 			    arr.push(e);
// 			    //把数组转换成字符串
// 			    var marquee=arr.join("");
// 			    //返回给浏览器
// 			    document.title=marquee;
// 			    //定时一直执行
// 			    window.setTimeout("init()",1000);
// 			}
// 			window.onload=init;
    </script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</body>
</html>
